---
title: Mention
description: Enable autocompletion for user mentions.
docs:
  - route: /docs/components/combobox
    title: Combobox
  - route: /docs/components/mention-element
    title: Mention Element
  - route: /docs/components/mention-input-element
    title: Mention Input Element
---

<ComponentPreview name="playground-demo" id="mention" />

<PackageInfo>

## Features

- Provides smart autocompletion for mentioning users or applying tags.
- Invoke combobox with `@` or `#` and select suggestion.

</PackageInfo>

## Installation

```bash
npm install @udecode/plate-mention
```

## Usage

```tsx
import { MentionPlugin } from '@udecode/plate-mention/react';

const plugins = [
  // ...otherPlugins,
  MentionPlugin,
];
```

## Plugins

### MentionPlugin

Extends [TriggerComboboxPlugin](/docs/combobox#options)

<APIOptions>
<APIItem name="insertSpaceAfterMention" type="boolean" optional>
  Whether to insert a space after the mention.
</APIItem>
</APIOptions>

### MentionInputPlugin

Plugin for mention input functionality.

## API

### editor.api.insert.mention

Override this API method to customize how mentions are inserted.

### getMentionOnSelectItem

Gets the handler for selecting an item in the mention combobox.

<APIParameters>
<APIItem name="options" type="object" optional>
<APISubList>
<APISubListItem parent="options" name="key" type="string" optional>
The plugin key of the mention plugin.

- **Default:** `MentionPlugin.key`

</APISubListItem>
</APISubList>
</APIItem>
</APIParameters>

<APIReturns>
  <APIItem type="MentionOnSelectItem">
    The handler for selecting an item in the mention combobox.
  </APIItem>
</APIReturns>
